<link rel="stylesheet" href="/assets/home/css/order.css" />

<!-- 下拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<!-- 引入http请求插件 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>




<div id="list">
    <div class="list"></div>
</div>

<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口

    }).init();

    var keywords = '';
    var page = 0; //当前页
    var limit = 10; //每页查询多少条


    //配置下拉刷新和上拉加载
    var scroll = new MeScroll('list', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 300,
                src: "/assets/home/plugin/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100,
                supportTap: true, //快速响应
            }
        }
    })


    // 下拉刷新回调
    function DownCallback() {
        scroll.resetUpScroll()
        $('#list .list').empty()
    }

    // 上拉刷新回调
    async function UpCallback(current) {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page: page,
            limit: limit,
            keywords: keywords
        };

        var result = await POST({
            url: '/business/subject',
            params: data
        })

        if (!result) return false

        if (result.code == 0) {
            mui.toast(result.msg, { duration: 1000 })
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        // console.log(list)
        // return false

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list) {

        for (var item of list) {

            // console.log(item) //因为这里是item的作用域，通常在这里打印出来，看里面有什么，再填到渲染里面。

            var temp = `
            <div class="item wow" data-wow-delay="100ms">
                <div class="content">
                    <div class="thumb">
                        <img src="${item.subject.thumbs_text}" alt="">
                    </div>
                    <div class="info">
                        <div class="code">
                            <span>订单号：</span>${item.code}
                        </div>
                        <div class="name">
                            <span>课程名称：</span>${item.subject.title}
                        </div>
                        <div class="type">
                            <span>课程分类：</span>${item.cate}
                        </div>
                        <div class="price">
                            <span>购买价格：</span>￥${item.total}
                        </div>
                        <div class="time">
                            <span>购买时间：</span>${item.createtime_text}
                        </div>
                    </div>
                </div>
        
                <div class="footer">
                    <div class="btn-list">
                        <a href="{:url('home/business/comment')}?orderid=${item.id}" class="mui-btn mui-btn-primary ${item.comment.id ? "color" : ""}">${item.comment.id ? "查看评价" : "立即评价"}</a>
                        <a href="{:url('home/subject/info')}?subid=${item.subid}" class="btn mui-btn mui-btn-success">查看课程</a>
                    </div>
                </div>
            </div>
            `
            $('#list .list').append(temp)
        }
    }
</script>